<template>
<el-dialog
width="78%"
:close-on-click-modal="false"
:visible.sync="visible">
  <div class="page-main">
    <div class="title">基本信息</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="ruleForm"
      :disabled="$route.query.option"
    >
      <el-form-item label="主标题：" prop="bigTitle">
        <el-input
          v-model="ruleForm.bigTitle"
          placeholder="请输入主标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="副标题：" prop="smallTitle">
        <el-input
          v-model="ruleForm.smallTitle"
          placeholder="请输入副标题"
        ></el-input>
      </el-form-item>

      <el-form-item label="能力简介：" prop="intro">
        <el-input
          type="textarea"
          :rows="4"
          v-model="ruleForm.intro"
          placeholder="请输入能力简介"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="封面：" prop="indexPic" placeholder="请上传封面">
        <el-upload
          :disabled="uploadedImgs.length >= 1"
          class="upload-demo"
          ref="upload"
          :accept="acceptList"
          :action="uploadEditorImgPath"
          :file-list="selectedFiles"
          :before-upload="uploadBefore"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          list-type="picture-card"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-delete"
                @click="removeLicensePic(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过2M
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="内容：" prop="content">
        <WangeEditor
          style="width: 1000px"
          :uploadImgPath="uploadEditorImgPath"
          :uploadVideoPath="uploadEditorVideoPath"
          ref="wangEditor"
          @changeEditor="changeEditor"
        ></WangeEditor>
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button
        type="primary"
        @click="changeButton(1)"
        v-if="!$route.query.option"
        >立即上架</el-button
      >
      <el-button
        type="primary"
        @click="changeButton(2)"
        v-if="!$route.query.option"
        >保存</el-button
      >
      <el-button type="info" @click="changeButton(0)">取消</el-button>
    </div>
  </div>
</el-dialog>
</template>

<script>
// import {
//   bigitalImageTextAdd,
//   bigitalImageTextUpdate,
//   bigitalImageTextDetail,
// } from "@/api/upstage/index";
import WangeEditor from "./components/WangeEditor/Editor";
export default {
  components: {
    WangeEditor,
  },
  data() {
    return {
      visible: false,
      uploadEditorImgPath: `${process.env.VUE_APP_BASE_API}/bigital/file/upload`, // 富文本上传图片url
      uploadEditorVideoPath: `${process.env.VUE_APP_BASE_API}/bigital/file/upload`, // 富文本上传视频url
      ruleForm: {
        bigTitle: "",
        smallTitle: "",
        intro: "",
        indexPic: "",
        content: "",
      },
      rules: {
        bigTitle: [
          { required: true, message: "请输入主标题", trigger: "blur" },
        ],
        smallTitle: [
          { required: true, message: "请输入副标题", trigger: "blur" },
        ],
        intro: [{ required: true, message: "请输入能力简介", trigger: "blur" }],
        // indexPic: [
        //   { required: true, message: "请上传封面", trigger: "change" },
        // ],
        // content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      uploadedImgs: [],
      selectedFiles: [],
      acceptList: ".png,.jpg",
      type: "",

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    // this.type = this.$route.query?.type;
    // if (this.$route.query?.id) {
    //   this.getBigitalImageTextDetail();
    // }
  },
  methods: {
    init(id) {
      this.visible = true
    },

    /** 获取详情 */
    // getBigitalImageTextDetail() {
    //   bigitalImageTextDetail({ id: this.$route.query?.id }).then((res) => {
    //     this.ruleForm = res.data;

    //     // 处理图片
    //     this.selectedFiles = [{ url: this.ruleForm.indexPic }];
    //     this.uploadedImgs = [this.ruleForm.indexPic];

    //     // 设置富文本内容
    //     this.$refs.wangEditor?.editor.txt.html(this.ruleForm.content || "");
    //   });
    // },

    submitForm(type) {
      // console.log(this.ruleForm);
      // this.$refs["ruleForm"].validate((valid) => {
      //   if (valid) {
      //     const requestFun = this.ruleForm.id
      //       ? bigitalImageTextUpdate
      //       : bigitalImageTextAdd;

      //     requestFun({
      //       ...this.ruleForm,
      //       status: type == 1 ? "0" : "1",
      //       type: this.type,
      //     }).then((res) => {
      //       this.$message.success(`编辑成功`);
      //       this.$router.go(-1);
      //     });
      //   }
      // });
    },

    changeButton(type) {
      switch (type) {
        case 0:
          this.visible = false
          break;
        case 1:
          this.submitForm(type);
          break;
        case 2:
          this.submitForm(type);
          break;
      }
    },
    changeEditor() {
      this.ruleForm.content = this.$refs.wangEditor.editor.txt.html();
    },
    /**
     * 文件上传成功
     * @param res
     * @param file
     * @param fileList
     */
    uploadSuccess(res, file, fileList) {
      console.log(res);
      if (res.code == 200) {
        const url = res.data.replace(
          "/home/digitrpt/html/images/",
          "http://132.98.83.22:8088/images/"
        );
        this.selectedFiles = fileList;
        this.uploadedImgs = [...url];
        this.ruleForm.indexPic = url;
        this.$message.success("上传成功！");
      } else {
        this.$message.error(res.msg || "上传失败！");
        this.$refs.upload.clearFiles(); // 清除已选的上传文件
      }
    },
    /**
     * 文件上传前
     * @param file
     */
    uploadBefore(file) {
      let fileType = true;
      let isLimit = false;

      let acceptList = [];
      this.acceptList.split(",").map((val) => {
        acceptList.push(val.replace(".", ""));
      });

      let regText = `/\\.(${acceptList.join("|")})$/`;

      fileType = eval(regText).test(file.name);

      if (!fileType) {
        this.$message.error(`上传文件的格式只能是 ${this.acceptList}中的一种!`);

        return false;
      }

      isLimit = file.size / 1024 / 1024 > 2;

      if (isLimit) {
        this.$message.warning(`上传文件大小不能超过 2MB!`);

        return false;
      }

      return fileType && !isLimit;
    },
    /**
     * 上传失败
     */
    uploadError(err) {
      if (err.stack.indexOf("上传格式不正确") !== -1) {
        this.$message.error("上传文件格式不正确！");
      } else {
        this.$message.error("文件上传失败！");
      }
    },

    removeLicensePic(file) {
      this.uploadedImgs = [];
      this.selectedFiles = [];
      this.ruleForm.indexPic = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.page-main {
  width: 100%;
  background: #fff;
  border-radius: 10px;
}
.title {
  font-size: 22px;
  font-weight: 600;
  margin: 20px 100px;
}
.ruleForm {
  margin-left: 100px;
  width: 900px;
}
.footer {
  margin: 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;  
}
</style>
